<template>
  <div class="wallet">
    <nav-bar title="我的钱包" fixed="fixed" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" :offset="50" :immediate-check="false" finished-text="暂无数据" @load="onLoad">
        <div class="wallet-box">
          <div class="wallet-over-view">
            <div class="amount-box">
              <div class="amount petty">
                <div class="price">{{accountInfo.reserveFund}}</div>
                <div>余额</div>
              </div>
              <div class="divider bd-r"></div>
              <div class="amount balance">
                <div class="price">{{accountInfo.coinAmount}}</div>
                <div>ORG</div>
              </div>
              <div class="divider bd-r"></div>
              <div class="amount deposit">
                <div class="price">{{accountInfo.deposit}}</div>
                <div>冻结金额</div>
              </div>
            </div>
          </div>
          <div class="wallet-operate">
            <div class="recharge" @click="goRoter('topup')">
              <span></span>
              <div>充值</div>
            </div>
            <div class="divider bd-r"></div>
            <div class="withdrawal" @click="goRoter('withdrawal')">
              <span></span>
              <div>提现</div>
            </div>
          </div>
          <div class="wallet-detail-list">
            <div class="title">资金明细</div>
            <div class="detail-item bd-b" v-for="(item, index) in financeWaterList" :key="'detail-item-' + index">
              <div class="name-time">
                <div class="name">{{ item.remark }}</div>
                <span class="time">{{ item.create_time }}</span>
              </div>
              <div class="amount" :class="item.amount > 0 ? 'recharge' : 'withdrawal'">
                {{ item.amount > 0 ? '+' : item.amount !==0 ? '-' : '' }}{{ Math.abs(item.amount) }} {{ item.type_str }}
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'wallet',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      pages: {
        page: 1,
        limit: 10
      },
      financeWaterList: []
    };
  },
  computed: {
    ...mapGetters(['accountInfo'])
  },
  created() {
    this.$store.dispatch('setAccountInfo');
    this.onRefresh();
  },
  mounted() {},
  methods: {
    onRefresh() {
      this.$set(this.pages, 'page', 1);
      this.fetchFinanceWater();
    },
    onLoad() {
      this.pages.page++;
      this.fetchFinanceWater();
    },
    goRoter(path) {
      var query = {};
      if (path === 'topup') {
        query.redirectURL = '/wallet';
      }
      this.$router.push({ path: '/' + path, query });
    },
    fetchFinanceWater() {
      this.$API.user
        .getFinanceWater(this.pages)
        .then(res => {
          if (!res.code) {
            if (this.pages.page === 1) {
              this.$set(this, 'financeWaterList', res.data);
            } else {
              this.$set(this, 'financeWaterList', [...this.financeWaterList, ...res.data]);
            }
            if (this.financeWaterList.length === res.count) {
              this.$set(this, 'finished', true);
            }
          }
        })
        .finally(() => {
          if (this.pages.page === 1) {
            setTimeout(() => {
              this.$set(this, 'isLoading', false);
            }, 500);
          }
          this.$set(this, 'loading', false);
        });
    }
  }
};
</script>
<style lang="less" scoped>
  /deep/ .van-pull-refresh {
    min-height: calc(100% - 1.128205rem);
  }
  .wallet-box {
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 88px);
    .wallet-over-view {
      width: 100%;
      height: 328px;
      background: #E31D1A;
      display: flex;
      justify-content: center;
      align-items: center;
      .amount-box {
        width: 691px;
        height: 240px;
        background: #FFF;
        box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.05);
        border-radius: 24px;
        display: inline-flex;
        align-items: center;
        font-size: 24px;
        font-weight: 500;
        color: #111111;
        text-align: center;
        .amount {
          height: 76px;
          display: inline-flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .petty, .deposit {
          width: 191px;
        }
        .balance {
          width: 308px;
        }
        .price {
          font-weight: bold;
          font-size: 30px;
          color: #FFBB00;
          line-height: 30px;
        }
        .divider {
          height: 67px;
          background-color: #CCC;
        }
      }
    }
    .wallet-operate {
      width: 100%;
      height: 105px;
      display: inline-flex;
      align-items: center;
      background-color: #FFF;
      position: relative;
      .recharge, .withdrawal {
        flex: 1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        font-weight: 500;
        color: #111;
        span {
          width: 40px;
          height: 40px;
          display: block;
          background-repeat: no-repeat;
          background-size: contain;
          margin-right: 21px;
        }
      }
      .recharge span {
        background-image: url('../../assets/images/icon-recharge.png');
      }
      .withdrawal span {
        background-image: url('../../assets/images/icon-withdrawal.png');
      }
      .divider {
        position: absolute;
        left: calc(50% - 1px);
        height: 67px;
        background-color: #CCC;
      }
    }
    .wallet-pay-password {
      width: 100%;
      height: 98px;
      font-size: 32px;
      font-weight: 500;
      color: #212121;
      margin-top: 20px;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      background-color: #FFF;
      box-sizing: border-box;
      padding: 0 29px;
      span {
        width: 20px;
        height: 40px;
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('../../assets/images/icon-arrow-right-grey.png');
      }
    }
    .wallet-detail-list {
      width: 100%;
      background-color: #FFF;
      box-sizing: border-box;
      padding: 0 29px 0 29px;
      .title {
        height: 63px;
        line-height: 63px;
        font-size: 24px;
        font-weight: 600;
        color: #999;
        margin: 0 -29px;
        padding-left: 29px;
        background-color: #F8F8F8;
      }
      .detail-item {
        width: 100%;
        padding: 29px 0;
        height: 140px;
        display: inline-flex;
        box-sizing: border-box;
        justify-content: space-between;
        .name-time {
          flex: 1;
          .name {
            font-size: 32px;
            font-weight: 500;
            color: #333;
          }
          .time {
            font-size: 28px;
            color: #999;
          }
        }
        .amount {
          width: 300px;
          font-size: 32px;
          font-weight: bold;
          text-align: right;
        }
        .recharge {
          color: #E31D1A;
        }
        .withdrawal {
          color: #1CA716;
        }
      }
    }
  }
</style>
